<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>缩放</title>
    <style>
      .box {
        position: relative;
        top: 100px;
        left: 100px;
        width: 400px;
        height: 400px;
      }

      /*四角*/
      .box .tl,
      .box .bl,
      .box .br,
      .box .tr {
        width: 20px;
        height: 20px;
        position: absolute;
        border: 1px solid #ccc;
        background: #fff;
        z-index: 2;
        cursor: nwse-resize;
      }

      .box .tl,
      .box .bl {
        left: -5px;
      }

      .box .tr,
      .box .br {
        right: -5px;
      }

      .box .br,
      .box .bl {
        bottom: -5px;
      }

      .box .tl,
      .box .tr {
        top: -5px;
      }

      .box .tr,
      .box .bl {
        cursor: nesw-resize;
      }

      .content {
        width: 100%;
        height: 100%;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="br"></span>
      <span class="bl"></span>
      <span class="tr"></span>
      <span class="tl"></span>
      <div class="content"></div>
    </div>

    <script>
      const box = document.querySelector(".box");
      const spanArr = box.getElementsByTagName("span");
      let isDrag = false;
      let isResize = false;
      for (let i = 0; i < spanArr.length; i++) {
        dragFn(spanArr[i]);
      }

      document.ondragstart = function (ev) {
        (ev || event).preventDefault();
        return false;
      };

      document.onmousedown = function (ev) {
        if(isResize) {
          return
        }

        isDrag = true
        const { clientX: oldX, clientY: oldY} = ev || event;
        const { offsetWidth: oldWidth, offsetHeight: oldHeight, offsetLeft: oldLeft, offsetTop: oldTop} = box;

        document.onmousemove = function (ev) {
          const { clientX, clientY } = ev || event;
          box.style.left = oldLeft + (clientX - oldX) + "px";
          box.style.top = oldTop + (clientY - oldY) + "px";
        };

        document.onmouseup = function () {
          isDrag = false
          document.onmousemove = null;
        };
      };

      function dragFn (ele) {
        ele.onmousedown = function (ev) {
          if(isDrag) {
            return
          }
          isResize = true;
          const { clientX: oldX, clientY: oldY} = ev || event;
          const { offsetWidth: oldWidth, offsetHeight: oldHeight, offsetLeft: oldLeft, offsetTop: oldTop} = box;

          document.onmousemove = function (ev) {
            const { clientX, clientY } = ev || event;

            if (ele.className == "tl") {
              if (oldWidth - (clientX - oldX) < 40 || oldHeight - (clientY - oldY) < 40) {
                return;
              }
              box.style.width = Math.max(40, oldWidth - (clientX - oldX)) + "px";
              box.style.height = Math.max(40, oldHeight - (clientY - oldY)) + "px";
              box.style.left = oldLeft + (clientX - oldX) + "px";
              box.style.top = oldTop + (clientY - oldY) + "px";
            } else if (ele.className == "bl") {
              if (oldWidth - (clientX - oldX) < 40 || oldHeight + (clientY - oldY) < 40) {
                return;
              }
              box.style.width = Math.max(40, oldWidth - (clientX - oldX)) + "px";
              box.style.height = Math.max(40, oldHeight + (clientY - oldY)) + "px";
              box.style.left = oldLeft + (clientX - oldX) + "px";
              box.style.bottom = oldTop + (clientY + oldY) + "px";
            } else if (ele.className == "tr") {
              if (oldWidth + (clientX - oldX) < 40 || oldHeight - (clientY - oldY) < 40) {
                return;
              }
              box.style.width = Math.max(40, oldWidth + (clientX - oldX)) + "px";
              box.style.height = Math.max(40, oldHeight - (clientY - oldY)) + "px";
              box.style.right = oldLeft - (clientX - oldX) + "px";
              box.style.top = oldTop + (clientY - oldY) + "px";
            } else if (ele.className == "br") {
              if (oldWidth + (clientX - oldX) < 40 || oldHeight +(clientY - oldY) < 40) {
                return;
              }
              box.style.width = Math.max(40, oldWidth + (clientX - oldX)) + "px";
              box.style.height = Math.max(40, oldHeight + (clientY - oldY)) + "px";
              box.style.right = oldLeft - (clientX - oldX) + "px";
              box.style.bottom = oldTop + (clientY + oldY) + "px";
            }
          };

          document.onmouseup = function () {
            isResize = false;
            document.onmousemove = null;
          };
          return false;
        };
      }
    </script>
  </body>
</html>
